body {
	font-family: Roboto, sans-serif;
	margin-top:50px;
}
.navbar .navbar-nav>li>a:focus, .navbar .navbar-nav>li>a:hover {
	outline: none;
	color: #9d9d9d;
	cursor: not-allowed;
}
#color-one {
	color: #F6F3F3;
}
#color-two {
	color: #F33259;
}
#color-one, #color-two {
	transition: color 0.6s linear;
}
.radical-button {
	background-color: #F33259;
	border: solid red 0.2px;
	border-radius: 2em;
	height: 3em;
}
.radical-button:focus {
	outline: none;
}

#section1 {
	/*height: 500px;*/
	margin-top: 8em;
}

.sk-folding-cube {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}
#loading {
	margin-top: 1em;
	font-weight: 700;
	text-shadow: 0.5px 0;
}
#dots {
	letter-spacing: 0.3em;
}

#section2 {
	margin-top: 10em;
}
#section2 h1 {
	font-weight: 700;
	text-shadow: 0.5px 0;
}

.pills img{
	width: 15%;
	position: absolute;
	left: 40%;
	transition: filter 6.2s linear;
}
.hue-rotate1 {
	filter: hue-rotate(105deg);
}
.hue-rotate2 {
	filter: hue-rotate(-105deg);
}
.myAnimation1 {
	-webkit-animation: myAnimation1 2.0s linear 1.0s forwards;
					animation: myAnimation1 2.0s linear 1.0s forwards;
}
.myAnimation2 {
	-webkit-animation: myAnimation2 2.0s linear 1.0s forwards;
					animation: myAnimation2 2.0s linear 1.0s forwards;
}
@-webkit-keyframes myAnimation1{
	from {
		left: 40%;
	}
	to {
		left: 85%;
	}
}
@keyframes myAnimation1 {
	from {
		left: 40%;
	}
	to {
		left: 85%;
	}
}
@-webkit-keyframes myAnimation2 {
	from {
		left: 40%;
	} to {
		left: 0%;
	}
}
@keyframes myAnimation2 {
	from {
		left: 40%;
	} to {
		left: 0%;
	}
}
.moveLeft {
	-webkit-animation: moveLeft 20s linear forwards;
					animation: moveLeft 20s linear forwards;
}
.moveRight {
	-webkit-animation: moveRight 20s linear forwards;
					animation: moveRight 20s linear forwards;
}
@-webkit-keyframes moveLeft {
	from {
		left: 0%;
	}
	to {
		left: -25%;
	}
}
@keyframes moveLeft {
	from {
		left: 0%;
	}
	to {
		left: -25%;
	}
}
@-webkit-keyframes moveRight {
	from {
		left: 85%;
	}
	to {
		left: 110%;
	}
}
@keyframes moveRight {
	from {
		left: 85%;
	}
	to {
		left: 110%;
	}
}
.rect-info {
	margin-top: 3em;
	font-size: 2em;
	font-weight: 700;
	transition: all 7.0s;
}
.customClass1 {
	opacity: 0;
	height: 0;
}
#rect1-info {
	-webkit-animation: moveInfoRight 2.0s linear 1.0s forwards;
					animation: moveInfoRight 2.0s linear 1.0s forwards;
}
#rect2-info {
	-webkit-animation: moveInfoLeft 2.0s linear 1.0s forwards;
					animation: moveInfoLeft 2.0s linear 1.0s forwards;
}
@-webkit-keyframes moveInfoRight {
	100% {
		transform: translateX(35%);
	}
}
@keyframes moveInfoRight {
	100% {
		transform: translateX(35%);
	}
}
@-webkit-keyframes moveInfoLeft {
	100% {
		transform: translateX(-35%);
	}
}
@keyframes moveInfoLeft {
	100% {
		transform: translateX(-35%);
	}
}
#afterResult {
	/*margin-top: 3em;*/
	font-size: 2em;
	font-weight: 700;
}
#resolve-button-div {
	transition: margin-top 7.0s ease;
	margin-top: 3rem;
}
#resolve {
	color: #fff;
	width: 15%;
	transition: all 0.5s linear;
}
#resolve:hover {
	font-size: 1.2em;
}
#next-page {
	margin-top: 1em;
	width: 15%;
	color: #fff;
}
#next-page i {
	margin-left: 1em;
	transition: 0.5s all;
}
#next-page:hover i{
	margin-left: 3em;
	font-size: 1.2em;
	animation: bounce 2s infinite;
}
#next-page a:hover {
	color: #fff;
	text-decoration-line: none;
}
@keyframes bounce{
	0%, 20%, 50%, 80%, 100% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.2);
	}
	75% {
		transform: scale(1.1);
	}
}
.filler {
	height: 200px;
}


